<template>
  <div class="outer">
    <div class="inner" v-loading="loading">
      <div class="card-title">新建评价</div>
      <el-card shadow="never" style="margin-bottom: 12px">
        <exercise-table :loading="loading" @create="handleEditorCreate" />
      </el-card>
      <div class="card-title">填写记录</div>
      <el-card shadow="never" style="margin-bottom: 12px">
        <record-table :loading="loading" @modify="handleEditorModify" />
      </el-card>

      <el-dialog
        :title="editorTitle"
        :visible.sync="editorDialogVisible"
        @close="handleEditorClose"
        :fullscreen="!isDesktop"
        :width="isDesktop ? dialogWidth : null"
        :close-on-click-modal="false"
        close-on-dialog
      >
        <form-content ref="fromContent" @saved="handleEditorSaved" />
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { format } from "@/utils/datetime.js";
import exerciseTable from "./exerciseTable.vue";
import recordTable from "./recordTable.vue";
import formContent from "./formContent.vue";
export default {
  name: "coachView",
  components: {
    exerciseTable,
    recordTable,
    formContent,
  },
  computed: {
    dialogWidth() {
      return this.$store.getters.dialogWidth;
    },
    screenWidth() {
      return this.$store.state.screenSize.width;
    },
    userNumber() {
      return this.$store.getters.userNumber;
    },
    userName() {
      return this.$store.getters.userName;
    },
    isDesktop() {
      return this.$store.getters.isDesktop;
    },
  },
  data() {
    return {
      loading: true,
      editorDialogVisible: false,
      editorTitle: "",
      formData: {},
    };
  },
  methods: {
    dateFormat: format,
    handleEditorCreate(data) {
      this.editorDialogVisible = true;
      this.editorTitle = "新建培训记录";
      this.$nextTick(() => {
        this.$refs.fromContent.openWithCreate(data);
      });
    },
    handleEditorModify(idx) {
      this.editorDialogVisible = true;
      this.editorTitle = "修改培训记录";
      this.$nextTick(() => {
        this.$refs.fromContent.openWithModify(idx);
      });
    },
    handleEditorClose() {},
    handleEditorSaved() {
      this.loadData();
      this.editorDialogVisible = false;
    },
    loadData() {
      this.loading = true;
      let recentDate = new Date();
      recentDate.setFullYear(recentDate.getFullYear() - 1);
      let recentDateString = this.dateFormat("yyyy-MM-dd hh:mm:ss", recentDate);
      this.$store.dispatch("getExercisesValid").then(() => {
        this.$store
          .dispatch("getCoachRecords", [
            { key: "coachNumber", value: this.userNumber },
            {
              key: "commitTime",
              value: { symbol: ">=", value: recentDateString },
            },
          ])
          .then(() => {
            this.loading = false;
          });
      });
    },
  },
  mounted() {
    if (!this.loading) {
      this.loadData();
    }
    // this.$store.dispatch("getExercises");
    // this.$store.dispatch("getUserList");
  },
  created() {
    this.loadData();
    console.log(this.$refs);
  },
};
</script>

<style scoped>
.inner {
  width: 100%;
  max-width: 768px;
  padding: 0;
  margin: 0;
}

.outer {
  width: 100%;
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: center;
}

.formView >>> .el-checkbox__label {
  display: inline-grid;
  white-space: pre-line;
  word-wrap: break-word;
  overflow: hidden;
  line-height: 20px;
}

* {
  box-sizing: border-box;
}

.card-title {
  font-size: 13px;
  color: #999;
  padding: 12px 12px 6px 12px;
}
</style>
